import React from 'react';
import './Index.css';
import ImageGallery from 'react-image-gallery';
import { Input, Grid,Icon, Item, Button, Dimmer, Loader } from 'semantic-ui-react';
import "react-image-gallery/styles/css/image-gallery.css";
import axios from 'axios';


// 菜单的模板 
let Menus = function(props) {
  let menuList = props.data.map(item=>{
    return (
      <Grid.Column key={item.id}>
        <div className='home-menu-item'>
          <Icon name='home' size='big' />
        </div>
        <div>{item.menu_name}</div>
      </Grid.Column>
    );
  })
  return (
    <div className="home-menu">
      <Grid columns={4} divided>
        <Grid.Row>
          {menuList}
        </Grid.Row>
      </Grid>
    </div>
  );
}
// 资讯的模板
let Info = function (props){
  let info = props.data.map(item=>{
    return (
      <Item.Header key={item.id}>
        <span>限购 ●</span>
        <span>{item.info_title}</span>
      </Item.Header>
    );
  })
  return (
    <div className="home-msg">
      <Item.Group unstackable>
        <Item className='home-msg-img' >
          <Item.Image size='tiny' src={'http://47.96.21.88:8086/public/zixun.png'} />
          <Item.Content verticalAlign='top'>
            {info}
            <div className="home-msg-more">
              <Icon name='angle right' size='big' />
            </div>
          </Item.Content>
        </Item>
      </Item.Group>
    </div>
  )
}

// 问答模板
let Faq = function(props) {
  let faq = props.data.map(item=>{
    let tags = item.question_tag.split(',').map((tag, index)=>{
      return <Button key={index} basic color='green' size='mini'>{tag}</Button>;
    });
    return (
      <li key={item.question_id}>
        <div>
          <Icon name='question circle outline' />
          <span>{item.question_name}</span>
        </div>
        <div>
          {tags}
          <div>{item.atime} ● <Icon name='comment alternate outline' /> {item.qnum}</div>
        </div>
      </li>
    );
  });
  return (
    <div className="home-ask">
      <div className="home-ask-title">好客问答</div>
      <ul>
        {faq}
      </ul>
    </div>
  );
}
// 房源列表
let House = function(props) {
  let house = ['最新开盘', '二手精选', '组一个家'];
  // 把全部数据分为三组放到二维数组中
  let houseData = [[],[],[]];
  props.data.forEach(d => {
    if(d.home_type === 1) {
      // 最新开盘
      houseData[0].push(d);
    } else if(d.home_type === 2) {
      // 二手精选
      houseData[1].push(d);
    } else {
      // 租一个家
      houseData[2].push(d);
    }
  });
  let houseList = house.map((item, index)=>{
    // 每个房源的列表
    let list = houseData[index].map(house=>{
      // 标签列表
      let tags = house.home_tags.split(',').map((tag, index)=>{
        return <Button key={index} basic color='green' size='mini'>{tag}</Button>;
      });
      return (
        <Item key={house.id}>
          <Item.Image src={'http://47.96.21.88:8086/public/home.png'}/>
          <Item.Content>
            <Item.Header>{house.home_name}</Item.Header>
            <Item.Meta>
              <span className='cinema'>{house.home_desc}</span>
            </Item.Meta>
            <Item.Description>
              {tags}
            </Item.Description>
            <Item.Description>{house.home_price}</Item.Description>
          </Item.Content>
        </Item>
      );
    })
    return (
      <div key={index}>
        <div className='home-hire-title'>{item}</div>
        <Item.Group divided unstackable>
          {/*房源列表*/}
          {list}
        </Item.Group>
      </div>
    );
  });
  return (
    <div>
      {houseList}
    </div>
  );
}


class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      swiper:[],
      menu:[],
      info:[],
      faq: [],
      house: [],
      // 数据加载状态位
      isLoading: true
    }
  }
  render() {
    return (
      <div className="home-container">
      <div className="home-topbar">
        {/*搜索条*/}
        <Input fluid icon='search' placeholder='请输入关键字...'/>
      </div>
      <div className="home-content">
        {/*背景遮罩效果*/}
        <Dimmer inverted active={this.state.isLoading}>
          <Loader>Loading...</Loader>
        </Dimmer>
        {/*轮播图*/}
        <ImageGallery 
          showThumbnails={false}
          showNav={false}
          autoPlay={false}
          items={this.state.swiper}/>
        {/*菜单布局*/}
        <Menus data={this.state.menu}/>
        {/* 资讯布局 */}
        <Info data={this.state.info}/>
        {/*问答布局*/}
        <Faq data={this.state.faq}/>
        {/*房源列表*/}
        <House data={this.state.house}/>
      </div>
    </div>
    );
  }

  // 通用的接口调用方法
  queryData = (path)=>{
    return axios.post(path).then(res=>{
      // 更新数据状态
      return res.data.list
    })
  }

  componentDidMount(){
    // 调用后台接口获取数据
    // 轮播图数据
    // axios.post('homes/swipe').then(res=>{
    //   this.setState({
    //     swiper:res.data.list
    //   });
    // })
    let swipe = this.queryData('homes/swipe');
    // 菜单数据
    // axios.post('homes/menu').then(res=>{
    //   this.setState({
    //     menu:res.data.list
    //   })
    // })
    let menu = this.queryData('homes/menu');
    // 资讯数据
    let info = this.queryData('homes/info');
    // 问答数据
    let faq = this.queryData('homes/faq');
    // 房源数据
    let house = this.queryData('homes/house');

    // Promise.all方法的作用：并发触发多个异步任务，所有的任务都返回时获取到所有的结果
    // Promise.race方法的作用：并发触发多个异步任务，只要有一个任务返回结果，那么就触发then获取该任务结果
    Promise.all([swipe, menu, info, faq, house]).then(ret=>{
      this.setState({
        swiper:ret[0],
        menu:ret[1],
        info:ret[2],
        faq: ret[3],
        house: ret[4],
        // 所有接口数据全部加载成功，隐藏遮罩效果
        isLoading: false
      })
    })
  }
}

export default Home;